<template>
	<view class="container">
		<view class="text-area">
			<text>输入值：</text>
			<input type="text" v-model="title" style="color: red;" />
		</view>
		<view class="text-area">
			<text>回传值：</text>
			<input type="text" :value="callBackValue" style="color: darkgreen;" />
		</view>
		<!--引入comA并传值从comA接收的值，接受comB的回传事件-->
		<comA :intent="title" @sendTocomB="handleComAData"></comA>
		<!--引入comA并传值从comA接收的值，接受comB的回传事件-->
		<comB :result="callBack" @callBackFun="handleComBcallback"></comB>
	</view>
</template>

<script>
	import comA from "../../../components/comA.vue";
	import comB from "../../../components/comB.vue";

	export default {
		components: {
			comA,
			comB,
		},
		data() {
			return {
				title: " ",
				comAData: " ",
				callBackValue: " ",
				callBack: " " // 修复：添加中间变量，用于接收 comA 传值并传给 comB
			};
		},
		methods: {
			// 修复：接收 comA 传值，赋值给 callBack（传给 comB）
			handleComAData(data) {
				this.callBack = data; // 把 comA 的值存到 callBack，再通过 :result 传给 comB
			},
			// 修复：接收 comB 回传值，赋值给 callBackValue（用于显示）
			handleComBcallback(data) {
				this.callBackValue = data; // 关键：把 comB 回传的值赋给显示字段
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.text-area {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	input {
		border: 1px solid #ccc;
		padding: 10rpx;
		flex: 1;
	}
</style>